<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框交互测试</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            padding: 20px;
            background: #f8f9fa;
        }
        .test-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .debug-panel {
            background: #f1f3f4;
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
            font-family: monospace;
            font-size: 12px;
            max-height: 300px;
            overflow-y: auto;
        }
        .modal {
            z-index: 9999 !important;
        }
        .modal-backdrop {
            z-index: 9998 !important;
        }
        .test-button {
            margin: 10px;
            padding: 15px 30px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h2><i class="bi bi-bug"></i> 模态框交互测试</h2>
        <p class="text-muted">测试创建项目模态框的显示和交互功能</p>
        
        <div class="row">
            <div class="col-md-6">
                <h4>测试按钮</h4>
                <button class="btn btn-primary test-button" data-bs-toggle="modal" data-bs-target="#testModal">
                    <i class="bi bi-plus-circle"></i> 使用data属性打开模态框
                </button>
                <br>
                <button class="btn btn-success test-button" id="manualTrigger">
                    <i class="bi bi-gear"></i> 手动JavaScript打开模态框
                </button>
                <br>
                <button class="btn btn-info test-button" id="checkElements">
                    <i class="bi bi-search"></i> 检查页面元素
                </button>
            </div>
            <div class="col-md-6">
                <h4>测试状态</h4>
                <div id="status" class="alert alert-info">
                    等待测试...
                </div>
            </div>
        </div>
        
        <div class="debug-panel">
            <strong>调试日志:</strong>
            <div id="debugLog"></div>
        </div>
    </div>

    <!-- 测试模态框 -->
    <div class="modal fade" id="testModal" tabindex="-1" aria-labelledby="testModalLabel" aria-hidden="true" data-bs-backdrop="true" data-bs-keyboard="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="testModalLabel">
                        <i class="bi bi-plus-circle"></i> 测试创建项目
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-success">
                        <i class="bi bi-check-circle"></i> 模态框成功显示！
                    </div>
                    <form>
                        <div class="mb-3">
                            <label for="testInput" class="form-label">测试输入</label>
                            <input type="text" class="form-control" id="testInput" placeholder="在这里输入测试文本">
                        </div>
                        <div class="mb-3">
                            <label for="testSelect" class="form-label">测试选择</label>
                            <select class="form-select" id="testSelect">
                                <option value="">选择一个选项</option>
                                <option value="1">选项 1</option>
                                <option value="2">选项 2</option>
                                <option value="3">选项 3</option>
                            </select>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="testCheck">
                            <label class="form-check-label" for="testCheck">
                                测试复选框
                            </label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="testSubmit">测试提交</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const debugLog = document.getElementById('debugLog');
        const status = document.getElementById('status');
        
        function log(message) {
            const time = new Date().toLocaleTimeString();
            debugLog.innerHTML += `<div>[${time}] ${message}</div>`;
            debugLog.scrollTop = debugLog.scrollHeight;
        }
        
        function updateStatus(message, type = 'info') {
            status.className = `alert alert-${type}`;
            status.innerHTML = message;
        }
        
        // 页面加载完成
        document.addEventListener('DOMContentLoaded', function() {
            log('页面加载完成');
            log('Bootstrap版本: ' + (window.bootstrap ? '已加载' : '未加载'));
            
            const modal = document.getElementById('testModal');
            const triggerBtn = document.querySelector('[data-bs-target="#testModal"]');
            
            log('模态框元素: ' + (modal ? '找到' : '未找到'));
            log('触发按钮: ' + (triggerBtn ? '找到' : '未找到'));
            
            // 模态框事件监听
            if (modal) {
                modal.addEventListener('show.bs.modal', function() {
                    log('模态框开始显示');
                    updateStatus('模态框正在显示...', 'warning');
                });
                
                modal.addEventListener('shown.bs.modal', function() {
                    log('模态框显示完成');
                    updateStatus('✅ 模态框显示成功！可以正常交互', 'success');
                    
                    // 测试焦点
                    const testInput = document.getElementById('testInput');
                    if (testInput) {
                        testInput.focus();
                        log('输入框获得焦点');
                    }
                });
                
                modal.addEventListener('hide.bs.modal', function() {
                    log('模态框开始隐藏');
                    updateStatus('模态框正在关闭...', 'warning');
                });
                
                modal.addEventListener('hidden.bs.modal', function() {
                    log('模态框隐藏完成');
                    updateStatus('模态框已关闭', 'info');
                });
            }
            
            // 手动触发按钮
            document.getElementById('manualTrigger').addEventListener('click', function() {
                log('手动触发模态框');
                try {
                    const modalInstance = new bootstrap.Modal(modal);
                    modalInstance.show();
                    log('手动触发成功');
                } catch (error) {
                    log('手动触发失败: ' + error.message);
                    updateStatus('❌ 手动触发失败: ' + error.message, 'danger');
                }
            });
            
            // 检查元素按钮
            document.getElementById('checkElements').addEventListener('click', function() {
                log('=== 元素检查开始 ===');
                log('模态框ID: ' + (modal ? modal.id : '未找到'));
                log('模态框类名: ' + (modal ? modal.className : '未找到'));
                log('Bootstrap对象: ' + (window.bootstrap ? '存在' : '不存在'));
                
                const backdrop = document.querySelector('.modal-backdrop');
                log('背景遮罩: ' + (backdrop ? '存在' : '不存在'));
                
                const allModals = document.querySelectorAll('.modal');
                log('页面中模态框数量: ' + allModals.length);
                
                log('=== 元素检查结束 ===');
            });
            
            // 测试提交按钮
            document.getElementById('testSubmit').addEventListener('click', function() {
                const input = document.getElementById('testInput').value;
                const select = document.getElementById('testSelect').value;
                const check = document.getElementById('testCheck').checked;
                
                log(`表单数据 - 输入: "${input}", 选择: "${select}", 复选框: ${check}`);
                updateStatus('✅ 表单交互正常！', 'success');
            });
            
            updateStatus('页面初始化完成，点击按钮开始测试', 'info');
        });
        
        // 全局错误捕获
        window.addEventListener('error', function(e) {
            log('JavaScript错误: ' + e.message);
            updateStatus('❌ 发生JavaScript错误', 'danger');
        });
    </script>
</body>
</html>